<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>模拟手机短信发送</title>
	<style>
		*{
		margin:0;
		padding:0;
		font-family: '微软雅黑';
	}
	html,body{ height: 100%; }
	a{ 
		text-decoration: none;
	 }
	body{
		background: url(img/bg.jpg) no-repeat center;
	}
	#centerBox{
		width:340px;
		height: 650px;
		background: #e8e7ef;
		box-shadow: 10px 10px 10px #8c89b6;
		position: fixed;
		left:50%;
		top:50%;
		margin-left:-170px;
		margin-top:-325px;
		border-radius: 16px;
	}
	.line{
		width:56px;
		height: 4px;
		background: #9fa0a5;
		border-radius: 4px;
		position: absolute;
		top:20px;
		left:147px;
	}
	.log{
		bottom:14px;
		left:150px;
		position: absolute;
	}
	.centerBox-m{
		width:305px;
		height: 534px;
		position: absolute;
		left:16px;
		top:43px;
		border:2px solid #b9b8bd;
		background: #fff;
		
	}
	#messageBody{
		height: 477px;
		overflow: auto;
	}
	#messageBody span{
		max-width:196px;
		padding:7px 10px 4px 14px;
		border-radius: 3px;
		position: relative;
		font-size: 12px;
		line-height: 24px;
		word-break: break-all;
	}
	#messageBody div{
		margin-top: 18px;
	}
	.right,.left{
		width:275px;
	}
	.right,.left,.right img,.right span,.left img,.left span{
		float: left;
		margin-left:10px;
		min-height: 24px;
	}
	.right img,.right span{
		float: right;
	}
	.left span{
		background: #e5e5e5;
		color: #4d4d4d;
	}
	.left em{
		width:5px;
		height: 9px;
		overflow: hidden;
		position: absolute;
		left:-5px;
		top:15px;
		background: url(img/l01.png) no-repeat;
	}
	.right em{
		width:5px;
		height: 11px;
		overflow: hidden;
		position: absolute;
		right:-5px;
		top:15px;
		background: url(img/r01.png) no-repeat;
	}
	.right span{
		color: #fff;
		background: #b9b3cd;
	}
	#send{
		height: 57px;
		background: #e7e7e7;
	}
	#send img{
		float: left;
		margin:10px 14px 0;
	}
	#text{
		float: left;
		width:164px;
		height: 30px;
		line-height: 30px;
		background: #fff;
		padding:5px 10px;
		font-size: 14px;
		color:#000;
		border:none;
		outline: none;
		margin-top:10px;
		border-radius: 5px;
	}
	#submitBtn{
		float: left;
		width:58px;
		font-size: 16px;
		margin-top:10px;
		text-align: center;
		color: #e27089;
		height: 40px;
		line-height: 40px;
		border:none;
		background: none;
		cursor: pointer;
		outline: none;
	}
	</style>
</head>

<body>
	<div id="centerBox">
		<div class="line"></div>
		<div class="centerBox-m">
			<div id="messageBody">
				<!-- <div class="right">
					<img src="img/rico.png" />
					<span>说：哈？好呀，多少钱我都愿意～～呵呵<em></em></span>
				</div>
				<div class="left">
					<img src="img/lico.png" />
					<span>说：这个简单，我们去妙味远程课堂学就行啦～～～<em></em></span>
				</div> -->
			</div>
			<div id="send">
				<img src="img/lico.png" id='img' />
				<input type="text" placeholder="请输入" id="text" />
				<input type="submit" value="发送" id="submitBtn" />
			</div>
		</div>
		<img class="log" src="img/miaov.png" />
	</div>
	<script>
		// 练习：
		// - 模拟手机短信发送
		// 	- 1-点击头像，进行头像的轮流切换
		// 	- 2-点击发送按钮，根据头像和输入框内容生成li到list中(左右分开
		// 	- 效果具体参考gif图片
		var pic = ["img/rico.png", "img/lico.png"],
			Dom = {
				img: document.getElementById('img'),
				submitBtn: document.getElementById('submitBtn'),
				text: document.getElementById('text'),
				messageBody: document.getElementById('messageBody')
			},
			myChoose = 0;

		Dom.img.onclick = function () {

			this.setAttribute('src', pic[myChoose]);
			myChoose = (myChoose == 1 ? 0 : 1);
		}
		Dom.submitBtn.onclick = function () {
			if(Dom.text.value===""){
				alert("亲，请写点什么吧!");
			}else{
				var content;
				if (myChoose) {
					content = '<div class="right">' +
						'<img src="img/rico.png" />' +
						'<span>' + Dom.text.value + '<em></em></span>' +
						'</div>';
				} else {
					content = '<div class="left">' +
						'<img src="img/lico.png" />' +
						'<span>' + Dom.text.value + '<em></em></span>' +
						'</div>';
				}
				Dom.messageBody.innerHTML = content+Dom.messageBody.innerHTML;
			}
			

		}
	</script>
</body>

</html>